<script setup lang="ts">
import Header from "./Header.vue";
import Card from "./Card.vue";
import Notice from "./Notice.vue";
import Note from "./Note.vue";

import { onLoad, onShow ,onHide} from "@dcloudio/uni-app";
import { ref ,computed} from "vue";
import { useAppStore } from '@/stores/appStore'

// 引入uniapp的store,进行长久存储
const appStore = useAppStore()
if(uni.getStorageSync('isLoggedIn')){
  appStore.setLogin(true)
  appStore.setUid(uni.getStorageSync('uid'));
}

const iflog = computed(() => appStore.isLoggedIn)
const uid = computed(() => appStore.uid)
async function getWxCode() {
  try {
    const res = await uni.login({
      provider: 'weixin'
    });
    if (res.code) {
      return res.code; // 这个code要传给后端
    } else {
      throw new Error('登录失败');
    }
  } catch (error) {
    console.error('获取code失败:', error);
    uni.showToast({ title: '登录失败', icon: 'none' });
    return null;
  }
}

// 登录函数
const goLogin = () => {
      // appStore.setLogin(true)
      // appStore.setUid(1)
      getWxCode().then(code => {
    //加载中
   
    if (code) {
      uni.showLoading({
      title: '登录中...',
      mask: true
     });
      // 这里可以将code发送到后端进行登录验证
      console.log('获取的code:', code);
      uni.request({
        // url: 'http://127.0.0.1:3000/userInf/user/wx', // 替换为你的后端登录接口地址
        url:'https://api.combinecalculate.cn/userInf/user/wx', // 替换为你的后端登录接口地址
        method: 'POST',
        data: { code }, // 将code作为参数发送给后端
        success: (res) => {
          console.log('登录成功:', res);
          
          // 登录成功后，将登录状态存储到本地或全局状态管理中
          // 假设后端返回的用户ID为res.data.uid
          // 这里可以根据实际情况进行处理
    
          uni.setStorageSync('isLoggedIn', true); // 假设登录成功后将登录状态设置为true
          appStore.setLogin(true)
          uni.setStorageSync('uid', res.data.data.uid); // 假设后端返回的用户ID为res.data.uid
          appStore.setUid(res.data.data.uid)
          appStore.setLogin(true)
        
          //关闭加载中
          uni.hideLoading();
          uni.reLaunch({
            url: '/pages/My/index', // 替换为你的登录页面路径 
          complete:(complete)=>{
      
    },
  })
        },
        fail: (err) => {
          console.error('登录失败:', err);
          uni.showToast({ title: '登录失败', icon: 'none' });
          uni.hideLoading();
        }
      })
    }
      
  });
      // uni.setStorageSync('isLoggedIn', true)
      // uni.setStorageSync('uid', 1)
  //页面刷新
 

};

onLoad(() => {

});
onShow(() => {
  
  //重新设置iflog
  console.log("HOME onShow");
  console.log("home" + iflog.value);
  console.log("home" + uid.value);
  if(uni.getStorageSync('uid')<10){//需要重新登录
    console.log("需要重新登录");
  uni.removeStorageSync('isLoggedIn')
  uni.removeStorageSync('uid')
  appStore.setLogin(false)
}
});
onHide(() => {
  console.log("HOME onHide");
})
</script>

<template>

  <view class="header-container" v-if="!iflog">
    <view class="greeting">您好，欢迎使用农事记录小程序</view>
    <view class="tips">登录后可查看地块、天气和操作记录</view>
    <button class="login-btn" @click="goLogin">立即登录</button>
  </view>

  <view class="indexContainer">
   
    <Header v-if="iflog" />
    <view class="main">
      <view class="title">常用工具</view>
      <Card :iflog="iflog" :uid="uid"></Card>
      <view class="title">通知</view>
      <Notice />

      <view class="title">操作记录</view>
      <view v-if="iflog">
        <Note  />
      </view>

    </view>
  </view>
</template>

<style scoped lang="scss">
.header-container {
  background-color: #5db524;
  color: #fff;
  padding: 40rpx 30rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;



  .greeting {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .tips {
    font-size: 26rpx;
    color: #eaffea;
    margin-bottom: 30rpx;
  }

  .login-btn {
    background-color: #ffffff;
    color: #5db524;
    padding: 16rpx 30rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: 600;
    border: none;
  }
}

.indexContainer {
  display: flex;
  flex-direction: column;

  .main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30rpx;

    .title {
      position: relative;
      padding-left: 10px;
      font-size: 15px;
      font-weight: 900;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 3px;
        height: 15px;
        background-color: #5db524;
      }
    }
  }
}
</style>
